<template>
  <div class="head-content">
    <div style="padding-left: 30px"><img class="logo-img" src="@/assets/images/logo-txt.jpg"></div>
    <div class="info-content">
      <el-tooltip
        class="box-item"
        :content="`当前积分余额：${point}`"
        placement="bottom"
      >
        <div class="coin-txt" @click="coinHandle"><el-icon style="position: relative; top: 2px; left: -3px; font-size: 16px"><Coin /></el-icon>{{point}}</div>
      </el-tooltip>
      <el-dropdown placement="bottom-end" trigger="click">
      <div class="user-content">
        <el-icon style="position: absolute; top: 50%; margin-top: -8px; left: 0; font-size: 16px"><Avatar /></el-icon>
        <span>{{nickname}}</span>
        <el-icon style="position: absolute; top: 50%; margin-top: -8px; right: 0; font-size: 16px"><ArrowDown /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="layoutFn">
            <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; margin-top: -2px; margin-right: 5px" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out mr-2 h-4 w-4"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    </div>
    <el-dialog
      v-model="coinVisible"
      title="积分明细"
      width="768"
      :destroy-on-close="true"
      align-center
    >
      <div>
        <el-table :data="coinData" style="width: 100%" height='500'>
          <el-table-column prop="type" label="类型" width="100" />
          <el-table-column prop="remark" label="描述" />
          <el-table-column prop="point" label="明细" width="100" />
          <el-table-column prop="time" label="时间" width="180" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
  import { useRouter, useRoute } from 'vue-router'
  import { watch, ref, onMounted } from 'vue'
  import { userCheck, myList } from '@/api/user'

  const router = useRouter()
  const route = useRoute()

  const nickname = ref('');
  const point = ref(0);

  const coinVisible = ref(false);
  const coinData = ref([]);

  const updateInfo = async () => {
    if (localStorage.getItem('userInfo')) {
      try {
        const info = JSON.parse(localStorage.getItem('userInfo'));
        nickname.value = info.nickname;
        
        // 首先使用本地存储的默认积分值作为初始显示
        point.value = info.totalPoints || 0;
        
        // 首先检查是否有有效的token
        const token = localStorage.getItem('token');
        if (!token) {
          return;
        }
        
        // 使用try-catch嵌套确保即使API调用失败也不会影响页面
        try {
          let res = await userCheck(info.id);
          if(res.code == 200){
            point.value = res.data.totalPoints || 0;
            // 更新localStorage中的积分信息
            info.totalPoints = point.value;
            localStorage.setItem('userInfo', JSON.stringify(info));
          }
        } catch (apiError) {
          // API调用失败时，不做任何操作，保持使用本地存储的值
          // 静默处理错误，不显示任何错误信息
        }
      } catch (error) {
        // 静默处理所有错误，不显示任何错误信息
        // 确保即使解析localStorage失败，页面也能正常工作
        nickname.value = '';
        point.value = 0;
      }
    }
  }

  onMounted(() => {
    updateInfo();
  })

  const layoutFn = () => {
    localStorage.removeItem('userInfo');
    localStorage.removeItem('token');
    router.push('/login')
  }

  watch(() => route.path, (newPath) => {
    updateInfo();
  });

  defineExpose({ updateInfo });

  const coinHandle = () => {
    getCoinList();
    coinVisible.value = true;
  }

  const getCoinList = async () => {
    let res = await myList();
    if(res.code == 200){
      coinData.value = res.data
    } else {
      coinData.value = [];
    }
  }
</script>
<style scoped>
.head-content {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background: var(--menu-background); */
}
.info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 30px;
}
.coin-txt {
  color: var(--primary);
  cursor: pointer;
}
.layout-btn {
  cursor: pointer;
  margin-left: 30px;
  width: 90px;
}
.layout-btn:hover {
  color: var(--primary);
}
.logo-img {
  width: 130px;
}
.user-content {
  color: var(--txt-color);
}
::v-deep .el-tooltip__trigger {
  font-size: 16px;
  line-height: 30px;
  padding: 0 20px;
  position: relative;
  margin-left: 10px;
}
::v-deep .el-table__inner-wrapper:before {
  height: 0;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-top: var(--el-table-border);
}
</style>
